<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上移下移</title>
    <style>
        * {
            margin: 0 auto;
            padding: 0;
            text-align: center;
        }
        
        table {
            border: 1px solid red;
        }
        
        button,
        th,
        td {
            margin: 5px;
            padding: 0 10px;
        }
    </style>
</head>

<body>
    <table border="1" cellpadding="0" cellspacing="0">
        <header>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>爱好</th>
                <th>操作</th>
            </tr>
        </header>
        <tbody>
            <!-- <tr>
                <td>1</td>
                <td>小明</td>
                <td>17</td>
                <td>男</td>
                <td>绘画</td>
                <td>
                    <button onclick="up()">上移</button>
                    <button onclick="del()">删除</button>
                    <button onclick="down()">下移</button>
                </td>
            </tr> -->
        </tbody>
    </table>

    <script src="../day15 上移下移/day15 上移下移.js"></script>
    <script>
        var tbody = document.querySelector('tbody');

        var t = new Date().getTime();
        for (var i = 0; i < arr.length; i++) {
            t++;
            arr[i].id = t;
        }
        localStorage.arr = JSON.stringify(arr);

        window.onload = function() {
            if (localStorage.arr) {
                arr = JSON.parse(localStorage.arr);
                show(arr);
            }
        }

        //渲染
        function show() {
            str = '';
            for (var i = 0; i < arr.length; i++) {
                str += `
                    <tr>
                        <td>${ i + 1 }</td>
                        <td>${arr[i].name}</td>
                        <td>${arr[i].age}</td>
                        <td>${arr[i].sex == '男' ? '男' : '女'}</td>
                        <td>${arr[i].hobby}</td>
                        <td>
                            <button onclick="up()">上移</button>
                            <button onclick="del()">删除</button>
                            <button onclick="down()">下移</button>
                        </td>
                    </tr>
                `;
            }
        }
    </script>
</body>

</html>